<template>
	<view class="page">
		<view class="player">
			<video 
				id="myMovieCtx"
				:src="trailerInfo.trailer" 
				:poster="trailerInfo.poster"
				class="movie"
				controls></video>
		</view>
		<!-- 电影信息 start -->
		<view class="movie-intro-wrapper">
			<navigator :url="'../cover/cover?cover='+trailerInfo.cover">
				<image :src="trailerInfo.cover" class="cover"></image>
			</navigator>
			<view class="movie-intro">
				<view class="movie-title">
					{{trailerInfo.name}}
				</view>
				<view class="movie-info">
					{{trailerInfo.basicInfo}}
				</view>
				<view class="movie-info">
					{{trailerInfo.originalName}}
				</view>
				<view class="movie-info">
					{{trailerInfo.totalTime}}
				</view>
				<view class="movie-info">
					{{trailerInfo.releaseDate}}
				</view>
				
				<view class="star-info-wrapper">
					<view class="score-box">
						<view class="score-title">
							综合评分
						</view>
						<view class="score-num">
							{{trailerInfo.score}}
						</view>
					</view>
					<view class="star-box">
						<block v-if="trailerInfo.score > 0">
							<trailerStar showNum="0" :score="trailerInfo.score"></trailerStar>
						</block>
						<view class="prise-counts">
							{{trailerInfo.prisedCounts}} 人点赞
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 电影信息 end -->
		<view class="line-box">
			<view class="line"></view>
		</view>
		<view class="movie-desc-box">
			<view class="desc-title"> 剧情介绍 </view>
			<view class="desc-content">
				{{trailerInfo.plotDesc}}
			</view>
		</view>
		<!-- 演职人员 start -->
		<view class="stage-box">
			<view class="desc-title">演职人员</view>
			<scroll-view scroll-x="true" class="stage-photo-box actor-list">
				<view class="actor-item" v-for="(actor,index) in actorArr">
					<image
						:src="actor.photo" 
						mode="aspectFill"
						@click="lookStagePic"
						:data-index = "index"
						class="actor-photo"></image>
					<view class="actor-name">
						{{actor.name}}
					</view>
					<view class="actor-role">
						{{actor.actName}}
					</view>
				</view>
				
				<view class="actor-item" v-for="(director,index) in directorArr">
					<image
						:src="director.photo" 
						mode="aspectFill"
						@click="lookStagePic"
						:data-index = "index + actorArr.length"
						class="actor-photo"></image>
					<view class="actor-name">
						{{director.name}}
					</view>
					<view class="actor-role">
						{{director.actName}}
					</view>
				</view>
			
			</scroll-view>
		</view>
		<!-- 演职人员 end -->
		
		<!-- 剧照 start -->
		<view class="stage-box">
			<view class="desc-title">剧照</view>
			<scroll-view scroll-x="true" class="stage-photo-box">
				<image 
					v-for="(pic,plotIndex) in plotPicArr"
					:src="pic" 
					mode="aspectFill"
					:data-index = "plotIndex"
					@click="lookMe"
					class="stage-photo"></image>
			</scroll-view>
		</view>
		<!-- 剧照 end -->
	</view>
</template>

<script>
	import trailerStar from "../../components/trailerStar/trailerStar.vue"
	export default {
		data() {
			return {
				trailerInfo: {//电影详情
				},
				// 演员
				actorArr: [],
				// 导演
				directorArr: [],
				// 剧照
				plotPicArr: []
			}
		},
		onReady() {
			let videoContext = uni.createVideoContext("myMovieCtx");
			this.videoContext = videoContext;
		},
		onShow() {
			// if(this.videoContext){
			// 	console.log(222,this.videoContext);
			// 	this.videoContext.play();
			// }
		},
		onHide() {
			this.videoContext.pause();
		},
		onLoad(params){
			uni.setNavigationBarColor({
				frontColor:"#ffffff",
				backgroundColor:"#000000"
			})
			
			let trailerId = params.trailerId;
			uni.showLoading({
				title:"加载中..."
			})
			// debugger;
			uni.request({
				url: this.serverUrl + '/search/trailer/'+ trailerId+'?'+this.visitKey,
				method:"POST",
				success: (res) => {
					
					if(res.data.status === 200){
						this.trailerInfo = res.data.data;
						let plotPicArr  = JSON.parse(res.data.data.plotPics);
						this.plotPicArr = plotPicArr;
					}
				},
				complete: () => {
					uni.hideLoading();
				}
			})
			
			// 获取导演 /search/staff/{trailerId}/{role}
			uni.request({
				url: this.serverUrl + '/search/staff/'+ trailerId+'/1?'+this.visitKey,
				method:"POST",
				success: (res) => {
					// debugger;
					if(res.data.status === 200){
						this.directorArr = res.data.data;
					}
				}
			})
			// 获取演员 /search/staff/{trailerId}/{role}
			uni.request({
				url: this.serverUrl + '/search/staff/'+ trailerId+'/2?'+this.visitKey,
				method:"POST",
				success: (res) => {
					// debugger;
					if(res.data.status === 200){
						this.actorArr = res.data.data;
					}
				}
			})
		},
		onShareAppMessage(){ //小程序转发
			 return {
			  title: this.trailerInfo.name,
			  path: '/pages/movie/movie?trailerId='+this.trailerInfo.trailerId
			} 
		},
		// 朋友圈分享，监听导航栏按钮
		onNavigationBarButtonTap(e) {
			if(e.type === "share"){//分享
				let trainlerInfo = this.trailerInfo;
				let trainlerId = trainlerInfo.id;
				let trainlerName = trainlerInfo.name;
				let cover = trainlerInfo.cover;
				let poster = trainlerInfo.poster;
				uni.share({
				    provider: "weixin",
				    scene: "WXSceneTimeline",
				    type: 0,
				    href: "http://www.damoxueyuan.com",
				    title: "达魔老哥《带你玩转前端项目那些事》",
				    summary: "达魔老哥《带你玩转前端项目那些事》"+trainlerName,
				    imageUrl: cover,
				    success: function (res) {
				        console.log("success:" + JSON.stringify(res));
				    }
				});
			}
		},
		methods: {
			lookStagePic(e){//预览演员图片
				let index = e.currentTarget.dataset.index;
				let actorArr = this.actorArr;
				let directorArr = this.directorArr;
				let tempArr = [].concat(actorArr).concat(directorArr);
				let stagePicArr = [];
				tempArr.forEach(obj=>{
					stagePicArr.push(obj.photo)
				})
				
				uni.previewImage({
					current: stagePicArr[index],
					urls: stagePicArr
				})
			},
			lookMe(e){//预览剧照图片
				let index = e.currentTarget.dataset.index;
				let plotPicArr = this.plotPicArr;
				uni.previewImage({
					current:plotPicArr[index],
					urls:plotPicArr
				})
			}
		},
		components:{
			trailerStar
		}
	}
</script>

<style>
	@import url("movie.css");
</style>
